<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="onSearch" @reset="onReset">
        <el-form-item label="商品" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入商品关键词/商品ID" clearable style="width: 200px" />
        </el-form-item>

        <el-form-item label="店铺" prop="shop_name">
          <el-input v-model="state.params.shop_name" placeholder="请输入店铺名称" clearable />
        </el-form-item>

        <el-form-item label="商品分类" prop="lv1">
          <el-select v-model="state.params.lv1" placeholder="不限">
            <el-option v-for="(o, i) in categoryList" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="商品状态" prop="product_status">
          <el-select v-model="state.params.product_status" placeholder="不限">
            <el-option v-for="(o, i) in statusOptions" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #product="{ row }">
          <ProductItem :data="row" />
        </template>
        <template #shop="{ row }">
          <div>
            <el-tooltip :content="row.shop_name" placement="top">
              <div class="m-ellipsis m-link" style="margin-bottom: 4px" @click="onClickShop(row)">{{ row.shop_name }}</div>
            </el-tooltip>
            <KwScoreLevel :value="row.dsr" />
          </div>
        </template>
        <template #relate_gmv="{ row }">
          <span>{{ row.day30_self_users ?? '-' }}</span>
          <span class="m-ml-4 m-mr-4">/</span>
          <span>{{ row.day30_sales ?? '-' }}</span>
        </template>
        <template #actions="{ row }">
          <el-link type="primary" @click="onClickClaim(row)">认领</el-link>
        </template>
      </k-table>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { claim, getCategoryList } from '@/api/crm-kgj/invest-product';
import { useTableList, useData } from './hooks/use-table';
import ProductItem from '../components/product-item.vue';
import { KwScoreLevel } from '@/components/k-widgets/index';
import JumpService from '@/services/jump/index';

defineOptions({
  name: 'KgjInvestProductPool'
});

const { statusOptions } = useData();
const { state, tableState, tableEvent, onSearch, onReset, getList } = useTableList();
const defaultCategoryOption = { label: '不限', value: -1 };
const categoryList = ref([{ ...defaultCategoryOption }]);

/** 店铺名称跳转 */
const onClickShop = (row: any) => {
  JumpService.jump(row.shop_url);
};
/** 认领 */
const onClickClaim = async (row: any) => {
  const { err } = await claim({ product_id: row.product_id });
  if (err) return;
  ElMessage.success('认领成功');
  if (state.list?.length === 1 && state.pages.page > 1) state.pages.page--;
  getList();
};

const initData = () => {
  getCategoryList().then(({ err, data }: any) => {
    if (err || !data?.length) return;
    categoryList.value = [{ ...defaultCategoryOption }].concat(data);
  });
};

initData();
</script>
